<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客首页</title>

    <link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css">
    <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
    <script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

    <!-- MarkDown渲染组件 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

    <!-- MarkDown 渲染样式 -->
    <link rel="stylesheet" href="/css/github-markdown.css">

    <!--代码高亮配置-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="http://apps.bdimg.com/libs/highlight.js/9.1.0/styles/github.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>
    <!--<script>hljs.initHighlightingOnLoad();</script>-->
    <link rel="stylesheet" href="/css/main.css">

</head>

<body>
<div id="app">
    <mu-appbar style="width: 100%;" color="primary">
        <mu-button icon slot="left" @click="open = !open">
            <mu-icon value="menu"></mu-icon>
        </mu-button>
        LanBlog
    </mu-appbar>
    <mu-container>

        <mu-drawer :open.sync="open" color="indigo50">

            <mu-container>
                <mu-card style="width: 100%; max-width: 375px; margin: 0 auto;">
                    <mu-card-header title="SinkSmell" sub-title="渴望成为架构师">
                        <mu-avatar slot="avatar">
                            <img src="/img/card.jpg">
                        </mu-avatar>
                    </mu-card-header>
                    <mu-card-media>
                        <img src="">
                    </mu-card-media>
                    <mu-card-title title="博客介绍" sub-title="LanBlog Description"></mu-card-title>
                    <mu-card-text>
                        LanBlog: 懒人博客,记录coding路上的风景,提供搜集自互联网上各种有趣的资源。
                        <br/>
                        技术介绍: 本博客使用前后端分离架构,博客前端使用单页式模板 html+Vue,服务端为Beego开发的restful风格api
                        并且提供一个博客管理后台,可以对博客网站内容进行管理,数据库为Mysql。
                    </mu-card-text>
                    <mu-card-actions class="button-wrapper">
                        <mu-button small color="red" @click="location.href='https://sinksmell.github.io'">
                            Resume
                            <mu-icon right value="send"></mu-icon>
                        </mu-button>
                        <mu-button small @click="open = !open">
                            Close
                            <mu-icon right value="cancel"></mu-icon>
                        </mu-button>

                    </mu-card-actions>
                </mu-card>

                <mu-card style="margin-top: 10px">
                    <mu-card-text>
                        <mu-form :model="fastForm" @submit.native.prevent>
                            <mu-flex class="flex-wrapper" justify-content="start">
                                <mu-text-field
                                        v-model="fastForm.keyWord"
                                        placeholder="快速查找文章"
                                        icon="search"
                                        @keyup.enter.native="fastFind">
                                </mu-text-field>
                            </mu-flex>
                        </mu-form>
                    </mu-card-text>
                </mu-card>

                <mu-card style="margin-top: 10px">
                    <mu-list toggle-nested>
                        <mu-list-item button :ripple="false" nested :open="openList === 'category'"
                                      @toggle-nested="openList = arguments[0] ? 'category' : ''">
                            <mu-list-item-action>
                                <mu-icon value="view_list"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>文章分类</mu-list-item-title>
                            <mu-list-item-action>
                                <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item v-for="cate in cates" button :ripple="false" :key="cate.id" slot="nested">
                                <mu-list-item-title @click="getTopicsByCate(cate.id)">{{cate.name}}</mu-list-item-title>
                            </mu-list-item>

                        </mu-list-item>
                        <mu-list-item button :ripple="false" nested :open="openList === 'archive'"
                                      @toggle-nested="openList = arguments[0] ? 'archive' : ''">
                            <mu-list-item-action>
                                <mu-icon value="loyalty"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>个人作品</mu-list-item-title>
                            <mu-list-item-action>
                                <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item button :ripple="false" slot="nested">
                                <mu-list-item-title @click="this.location.href='https://github.com/sinksmell/LanBlog'">
                                    LanBlog博客
                                </mu-list-item-title>
                            </mu-list-item>
                            <mu-list-item button :ripple="false" slot="nested">
                                <mu-list-item-title
                                        @click="this.location.href='https://github.com/sinksmell/bee-crontab'">
                                    分布式任务调度器
                                </mu-list-item-title>
                            </mu-list-item>
                            <mu-list-item button :ripple="false" slot="nested">
                                <mu-list-item-title
                                        @click="this.location.href='https://github.com/sinksmell/MyLoadGen'">
                                    网站压力生成器
                                </mu-list-item-title>
                            </mu-list-item>
                            <mu-list-item button :ripple="false" slot="nested">
                                <mu-list-item-title>仿Steam购物网站</mu-list-item-title>
                            </mu-list-item>
                        </mu-list-item>
                        <mu-list-item button :ripple="false" nested :open="openList === 'tools'"
                                      @toggle-nested="openList = arguments[0] ? 'tools' : ''">
                            <mu-list-item-action>
                                <mu-icon value="build"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item-title>实用工具</mu-list-item-title>
                            <mu-list-item-action>
                                <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
                            </mu-list-item-action>
                            <mu-list-item button :ripple="false" slot="nested">
                                <mu-list-item-title>TODO Item 1</mu-list-item-title>
                            </mu-list-item>
                            <mu-list-item button :ripple="false" slot="nested">
                                <mu-list-item-title>TODO Item 2</mu-list-item-title>
                            </mu-list-item>
                            <mu-list-item button :ripple="false" slot="nested">
                                <mu-list-item-title>TODO Item 3</mu-list-item-title>
                            </mu-list-item>
                        </mu-list-item>
                    </mu-list>
                </mu-card>

                <mu-paper class="demo-paper" :z-depth="4" style="margin-top: 20px">
                    <mu-chip class="demo-chip"
                             v-for="item, index in tags"
                             :key="index"
                             :color="tagColor()"
                             @click="getTopicsByTag(item.id)">
                    {{item.name}}
                    </mu-chip>
                </mu-paper>

            </mu-container>


        </mu-drawer>

        <mu-container v-show="!reading" id="main">
            <!-- 水平居中 -->
            <mu-flex class="flex-wrapper" justify-content="center" v-for="item in topicData" :key="item.id">

                <mu-card class="topic-card">
                    <mu-card-header>
                        <mu-flex class="flex-wrapper" justify-content="center">
                            <mu-card-title :title="item.title"></mu-card-title>
                        </mu-flex>
                    </mu-card-header>
                    <mu-card-media>
                        <img :src="item.url" style="max-height: 350px">
                    </mu-card-media>
                    <mu-card-title title="摘要" sub-title="Summary"></mu-card-title>
                    <mu-card-text>
                    {{item.summary}}
                    </mu-card-text>
                    <mu-card-actions>
                        <mu-flex class="flex-wrapper" justify-content="center">
                            <mu-button @click="readTopic(item.id)">
                                <mu-icon left value="book" color="grey900"></mu-icon>
                                阅读全文
                            </mu-button>
                        </mu-flex>

                    </mu-card-actions>
                </mu-card>

            </mu-flex>
            <mu-alert color="warning" v-if="topics.length===0" style="margin-top: 100px">
                <mu-icon left value="info"></mu-icon>
                <mu-flex class="flex-wrapper" justify-content="center">
                    <h2 style="text-align: center">当前条件下没有文章!</h2>
                </mu-flex>
            </mu-alert>
        </mu-container>

        <mu-container v-show="reading" id="readCard">

            <mu-flex class="flex-wrapper" justify-content="center">
                <mu-card class="topic-card">
                    <mu-card-header>
                        <mu-flex class="flex-wrapper" justify-content="center">
                            <mu-card-title :title="readCard.title"></mu-card-title>
                            <!--<mu-flex class="flex-demo" justify-content="center" >center</mu-flex>-->
                        </mu-flex>

                    </mu-card-header>
                    <mu-card-media>
                        <img :src="readCard.img" style="max-height: 350px">
                    </mu-card-media>
                    <mu-card-text>
                        <article id="content" class="markdown-body">

                        </article>

                    </mu-card-text>
                </mu-card>
            </mu-flex>
        </mu-container>
    </mu-container>
    <mu-container v-show="reading">
        <mu-flex class="flex-wrapper" justify-content="center">
            <mu-card class="topic-card">
                <mu-bottom-nav>
                    <mu-tooltip placement="top" content="打开侧边栏">
                        <mu-button large icon color="primary" @click="open=!open">
                            <mu-icon value="menu"></mu-icon>
                        </mu-button>

                    </mu-tooltip>
                    <mu-tooltip placement="top" content="返回首页">
                        <mu-button large icon color="primary" @click="reading=!reading">
                            <mu-icon value="home"></mu-icon>
                        </mu-button>
                    </mu-tooltip>
                    <mu-tooltip placement="top" content="Github">
                        <mu-button large icon color="success"
                                   @click="location.href='https://github.com/sinksmell/LanBlog'">
                            <mu-icon value="star"></mu-icon>

                        </mu-button>
                    </mu-tooltip>

                    <mu-tooltip placement="top" content="个人简历">
                        <mu-button large icon color="red" @click="location.href='https://sinksmell.github.io'">
                            <mu-icon value="school"></mu-icon>
                        </mu-button>
                    </mu-tooltip>

                    <mu-tooltip placement="top" content="回到顶部">
                        <mu-button large icon color="success" @click="backToTop">
                            <mu-icon value="arrow_upward"></mu-icon>

                        </mu-button>
                    </mu-tooltip>


                </mu-bottom-nav>
            </mu-card>
        </mu-flex>
    </mu-container>
    <mu-container v-show="!reading" style="padding-top: 20px">
        <mu-flex justify-content="center">
            <mu-pagination raised :total="topics.length" :current.sync="pagination.current"
                           :page-size="pagination.pageSize"
                           @change="backToTop"></mu-pagination>
        </mu-flex>
    </mu-container>
</div>

<script>
    //const axios = require('axios')
    // 设置是否使用<br> 来换行,如果使用的话,代码会缩成一团
    hljs.configure({useBR: false});
    // $('pre code').each(function(i, block) {
    //     hljs.highlightBlock(block);
    // });
    // $(document).ready(function () {
    //     $('pre.code').each(function (i, block) {
    //         hljs.highlightBlock(block);
    //     });
    // });

    let app = new Vue({
        el: '#app',
        data() {
            return {
                //   host: 'http://localhost:8088/v1/',
                host: '/api/',
                docked: false,
                openList: '',
                open: false,
                reading: false,
                position: 'left',
                colors: ['primary', 'secondary', 'success', 'indigo400', 'teal', 'error', 'cyan', 'purple', 'blue'],
                current: 1,
                cates: [],
                topics: [],
                tags: [],
                pagination: {
                    current: 1,
                    total: 5,
                    pageSize: 5
                },
                panel: '',
                fastForm: {
                    keyWord: ''
                },
                readCard: {
                    img: '',
                    title: ''
                }

            }
        },
        computed: {
            topicData() {
                return this.topics.slice((this.pagination.current - 1) * (this.pagination.pageSize), this.pagination.current * (this.pagination.pageSize))
            },
            tagColor() {
                return function () {
                    let index = Math.floor(Math.random() * this.colors.length)
                    return this.colors[index]
                }
            },
            currentTopics() {
                let me = this
                return function () {
                    let topics = me.topics.slice((me.pagination.current - 1) * (me.pagination.pageSize), me.pagination.current * (me.pagination.pageSize))
                    return topics
                }
            }
        },
        methods: {
            readTopic(topicId) {
                this.reading = true
                let me = this
                // 发送ajax 请求 需要 五步

                // （1）创建异步对象
                var ajaxObj = new XMLHttpRequest();

                // （2）设置请求的参数。包括：请求的方法、请求的url。
                ajaxObj.open('get', this.host + 'topic/' + topicId);

                // （3）发送请求
                ajaxObj.send();

                //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
                //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
                ajaxObj.onreadystatechange = function () {
                    // 为了保证 数据 完整返回，我们一般会判断 两个值
                    if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                        // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                        // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                        // console.log('数据返回成功');
                        // 数据是保存在 异步对象的 属性中
                        //  console.log(ajaxObj.responseText);
                        let readCard = document.getElementById('content')
                        var jsObj = JSON.parse(ajaxObj.responseText);
                        readCard.innerHTML = marked(jsObj.content)
                        me.readCard.img = jsObj.url
                        me.readCard.title = jsObj.title
                        hljs.highlightBlock(readCard)
                    }
                }

            },
            toggle(panel) {
                this.panel = panel === this.panel ? '' : panel;
            },
            scrollTo(element, to, duration) {
                if (duration <= 0) return;
                let difference = to - element.scrollTop;
                let perTick = difference / duration * 10;

                setTimeout(function () {
                    element.scrollTop = element.scrollTop + perTick;
                    if (element.scrollTop === to) return;
                    scrollTo(element, to, duration - 10);
                }, 10);
            },
            backToTop() {
                scrollTo(document.body.scrollTop, 0, 1200)
            },
            fastFind() {
                let me = this
                let ajaxObj = new XMLHttpRequest()
                ajaxObj.open('get', this.host + 'topic/find/' + me.fastForm.keyWord)
                ajaxObj.send()
                ajaxObj.onreadystatechange = function () {
                    if (ajaxObj.status == 200 && ajaxObj.readyState == 4) {
                        let jsObj = JSON.parse(ajaxObj.responseText)
                        me.topics = jsObj.topics
                        me.pagination.current = 1
                        me.reading = false
                        me.backToTop()
                    }
                }
            },
            getTopicsByCate(cateId) {
                let me = this
                let ajaxObj = new XMLHttpRequest()
                ajaxObj.open('get', this.host + 'topic/cate/' + cateId)
                ajaxObj.send()
                ajaxObj.onreadystatechange = function () {
                    if (ajaxObj.status == 200 && ajaxObj.readyState == 4) {
                        let jsObj = JSON.parse(ajaxObj.responseText)
                        me.topics = jsObj.topics
                        me.pagination.current = 1
                        me.reading = false
                        me.backToTop()
                        // console.log(jsObj.topics)
                    }
                }
            },
            getTopicsByTag(tagId) {
                let me = this
                let ajaxObj = new XMLHttpRequest()
                ajaxObj.open('get', this.host + 'topic/label/' + tagId)
                ajaxObj.send()
                ajaxObj.onreadystatechange = function () {
                    if (ajaxObj.status == 200 && ajaxObj.readyState == 4) {
                        let jsObj = JSON.parse(ajaxObj.responseText)
                        me.topics = jsObj.topics
                        me.pagination.current = 1
                        me.reading = false
                        me.backToTop()
                        // console.log(jsObj.topics)
                    }
                }
            }
        },
        mounted() {
            let me = this
            let ajaxObj = new XMLHttpRequest()
            ajaxObj.open('get', this.host + 'topic/list')
            ajaxObj.send()
            ajaxObj.onreadystatechange = function () {
                if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                    let jsObj = JSON.parse(ajaxObj.responseText)
                    me.topics = jsObj
                }
            }
            //totalPage = (totalCount+ loadCount-1) / loadCount;
            me.pagination.total = (me.topics.length + me.pagination.pageSize - 1) / me.pagination.pageSize

            let ajaxTag = new XMLHttpRequest()
            ajaxTag.open('get', this.host + 'label/list')
            ajaxTag.send()
            ajaxTag.onreadystatechange = function () {
                if (ajaxTag.readyState == 4 && ajaxTag.status == 200) {
                    let jsObj = JSON.parse(ajaxTag.responseText)
                    me.tags = jsObj
                }
            }

            let ajaxCate = new XMLHttpRequest()
            ajaxCate.open('get', this.host + 'category/list')
            ajaxCate.send()
            ajaxCate.onreadystatechange = function () {
                if (ajaxCate.readyState == 4 && ajaxCate.status == 200) {
                    let jsObj = JSON.parse(ajaxCate.responseText)
                    me.cates = jsObj
                }
            }
        }
    })

</script>

<style lang="less">
    .demo-chip-wrapper {
        text-align: center;
    }

    .demo-chip {
        margin: 4px;
        vertical-align: middle;
    }
</style>

<style lang="less">
    .button-wrapper {
        text-align: center;
    }

    .mu-button {
        margin: 8px;
        vertical-align: top;
    }


</style>

</body>
</html>
